<script setup>
import { useRouter, RouterView } from 'vue-router'
import { asideShow } from './config';
import {
  Menu as IconMenu,
} from '@element-plus/icons-vue'
import { router as routerConfig } from './router'
const router = useRouter()
const clickMenu = (item) => {
  router.push(item.path)
}
</script>

<template>
  <div class="common-layout" v-if="asideShow">
    <el-container>
      <el-aside width="200px" class="common-aside">
        <el-menu background-color="#001529" text-color="#fff" active-text-color="#409eff" class="common-aside"
          default-active="0">
          <el-menu-item v-for="(item, i) in routerConfig" :index="i.toString()" @click="clickMenu(item)">
            <el-icon>
              <!-- {{ item.icon }} -->
              <component v-if="item.icon" :is="item.icon" /><icon-menu v-else />
            </el-icon>
            <span>{{ item.menu }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
  <el-container v-else>
    <RouterView />
  </el-container>

</template>

<style scoped>
.common-aside {
  height: 100vh;
}
</style>
